<template>
  <!--模板-->
   动态添加路由<br>
  <el-button type="" @click="add1">在第二个菜单后，添加新菜单（根）</el-button><br>
  <el-button type="" @click="add2">在【基础控件】里添加新菜单，（第一个菜单后）</el-button><br>
  <el-button type="" @click="add4">在【基础控件-表单控件】里添加新新菜单</el-button><br>
  <el-button type="" @click="add3">在【基础控件-原生HTML】里添加子菜单</el-button><br>
  <br>
  <el-button type="" @click="del3">删除 ——【基础控件-原生HTML-第二级子菜单】</el-button><br>
  <el-button type="" @click="del2">删除 ——【基础控件-基础表单】</el-button><br>
  <el-button type="" @click="del1">删除 ——【复合控件】</el-button><br>

</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { useRouter } from '../../../lib/main'
  import { Document, FolderOpened } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'nf-ui-elp-menu',
    props: {
    },
    setup(props, context) {

      const router = useRouter()

      const add1 = () => {
        router.addRoute([
          {
            menuId: '1',
            title: '添加根菜单',
            naviId: '0',
            path: 'new-router',
            icon: FolderOpened,
            childrens: [
              {
                menuId: '100-10', title: '动态菜单', path: 'ui', icon: Document,
                component: () => import('../form/10-form.vue')
              }
            ]
          }
        ], { index: 1 })
      }

      const add2 = () => {
        router.addRoute([
          {
            menuId: 'dt-200',
            title: '基础控件的子菜单',
            naviId: '0',
            path: 'new-router',
            icon: FolderOpened,
            childrens: [
              {
                menuId: '200-10', title: '动态菜单', path: 'ui', icon: Document,
                component: () => import('../form/10-form.vue')
              }
            ]
          }
        ], {path: ['1000'], index: 1})
      }

      const add3 = () => {
        router.addRoute([
          {
            menuId: 'dt-300',
            title: '第二级子菜单',
            naviId: '0',
            path: 'new-router',
            icon: FolderOpened,
            childrens: [
              {
                menuId: '300-10', title: '动态菜单', path: 'ui', icon: Document,
                component: () => import('../form/10-form.vue')
              }
            ]
          }
        ], {path: ['1000', '11']})
      }
      
      const add4 = () => {
        router.addRoute([
          {
            menuId: 'dt-400',
            title: '子菜单变',
            naviId: '0',
            path: 'new-router',
            icon: FolderOpened,
            childrens: [
              {
                menuId: '400-10', title: '动态菜单', path: 'ui', icon: Document,
                component: () => import('../form/10-form.vue')
              }
            ]
          }
        ], {path: ['1000', '13', '200-10']})
      }

      const del1 = () => {
        router.removeRoute([], '2000')
      }

      const del2 = () => {
        router.removeRoute(['1000'], '14')
      }

      
      const del3 = () => {
        router.removeRoute(['1000', '11'], 'dt-300')
      }

      return {
        add1,
        add2,
        add3,
        add4,
        del1,
        del2,
        del3
      }
    }
  })
</script>